<template>
  <pro-table
    ref="table"
    title="捐献订单"
    :request="getList"
    :columns="columns"
    :search="searchConfig"
    :pagination="paginationConfig"
    @selectionChange="handleSelectionChange"
  >
    <!-- 工具栏 -->
    <template #toolbar>
<!--      <el-button-->
<!--        type="primary"-->
<!--        icon="el-icon-plus"-->
<!--        @click="$router.push('/test/add')"-->
<!--      >-->
<!--        添加-->
<!--      </el-button>-->
      <el-button type="primary" icon="el-icon-refresh" @click="refresh">
        刷新
      </el-button>
    </template>
    <template #operate="scope">
      <el-button size="mini" @click="detail(scope.row)">查看</el-button>
      <el-button
        v-if="scope.row.status === 3"
        size="mini"
        type="primary"
        @click="editbox(scope.row)"
      >
        编辑
      </el-button>

    </template>
    <template #status="scope">
      <span v-if="scope.row.status === 1">已审核</span>
      <span v-else-if="scope.row.status === 3">未审核</span>
      <span v-else>已驳回</span>
    </template>
    <template #create_time="scope">
      <span v-text="formatDate(scope.row.create_time)"></span>
    </template>
    <template #nickname="scope">
      <span v-text="arrToName(scope.row)"></span>
    </template>
  </pro-table>

<!--  查看详情 -->
  <el-dialog
    v-model="detailVisible"
    title="捐献单详情"
    width="380px"
  >

    <el-form  label-width="70px">
      <el-form-item label="捐献者">
        {{arrToName(current_row)}}
      </el-form-item>
      <el-form-item label="捐献单">
        <p v-for="(item,i) in details" :key="i">
          <el-badge :value="item.total" class="item ml-2">
            <el-button v-text="item.resource_id.name" size="small"></el-button>
          </el-badge>
          <el-tag class="ml-2">x</el-tag>
          <el-tag type="success" class="ml-2">{{item.resource_id.scale}}/{{item.resource_id.count}}</el-tag>
          <el-tag class="ml-2">=</el-tag>
          <el-tag class="ml-2" type="danger">{{item.value}}</el-tag>
        </p>
      </el-form-item>
      <el-form-item label="合计积分">
        {{current_row.integral}}
      </el-form-item>
      <el-form-item label="状态">
        <span v-if="current_row.status === 1">已通过</span>
        <span v-else-if="current_row.status === 2">已驳回</span>
        <span v-else>未处理</span>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="detailVisible = false"
        >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
<!--  编辑-->
  <el-dialog
    v-model="editVisible"
    title="审核"
    width="380px"
  >
    <el-form ref="editForm" :model="edit" label-width="70px">
      <el-form-item label="捐献者">
        {{arrToName(current_row)}}
      </el-form-item>
      <el-form-item label="捐献单">
        <p v-for="(item,i) in details" :key="i">
          <el-badge :value="item.total" class="item ml-2">
            <el-button v-text="item.resource_id.name" size="small"></el-button>
          </el-badge>
          <el-tag class="ml-2">x</el-tag>
          <el-tag type="success" class="ml-2">{{item.resource_id.scale}}/{{item.resource_id.count}}</el-tag>
          <el-tag class="ml-2">=</el-tag>
          <el-tag class="ml-2" type="danger">{{item.value}}</el-tag>
        </p>
      </el-form-item>
      <el-form-item label="合计积分">
        {{current_row.integral}}
      </el-form-item>
      <el-form-item label="审核意见">
        <el-radio-group v-model="edit.status">
          <el-radio label="通过" value="1"></el-radio>
          <el-radio label="驳回" value="2"></el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="editSubmit"
        >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import { editApply, getApplyDetail, getApplyList, getApplyPasser } from "../../api/apply";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: 'applyList',
  setup() {
    const state = reactive({
      detailVisible: ref(false),
      details: [],
      current_row: {},
      edit: {
        id: 0,
        status: '通过',
      },
      passer: [],
      editVisible: ref(false),
      editForm: ref(),
      // 表格列配置，大部分属性跟el-table-column配置一样
      columns: [
        { type: 'selection' },
        { label: '序号', prop: 'id', sortable: true },
        { label: '成员', tdSlot: 'nickname', width: 180 },
        { label: '总计积分', prop: 'integral' },
        { label: '总计积分', prop: 'integral' },
        // { label: '审核者', tdSlot: 'pass_id' },
        { label: '提交时间', tdSlot: 'create_time', sortable: true },
        {
          label: '操作',
          fixed: 'right',
          width: 180,
          align: 'left',
          tdSlot: 'operate', // 自定义单元格内容的插槽名称
        },
      ],
      // 搜索配置
      searchConfig: {
        labelWidth: '90px', // 必须带上单位
        inputWidth: '360px', // 必须带上单位
        fields: [
          {
            type: 'text',
            label: '游戏ID',
            name: 'nickname',
          },
          {
            label: '状态',
            name: 'status',
            type: 'select',
            options: [
              {
                name: '',
                value: '',
              },
              {
                name: '未审核',
                value: 3,
              },
              {
                name: '已审核',
                value: 1,
              },
              {
                name: '已驳回',
                value: 2,
              },
            ],
          },
          {
            label: '审核者',
            name: 'pass_id',
            type: 'select',
            filterable: true,
            options: [],
          },
          {
            label: '氏族',
            name: 'team',
            type: 'radio-button',
            options: [
              {
                name: '一团',
                value: 1,
              },
              {
                name: '二团',
                value: 2,
              },
              {
                name: '三团',
                value: 3,
              },
              {
                name: '四团',
                value: 4,
              },
            ],
          },
        ],
      },
      // 分页配置
      paginationConfig: {
        layout: 'total, prev, pager, next, sizes', // 分页组件显示哪些功能
        pageSize: 5, // 每页条数
        pageSizes: [5, 10, 20, 50],
        style: { textAlign: 'left' },
      },
      selectedItems: [],
      batchDelete() {
        console.log(state.selectedItems)
      },
      // 选择
      handleSelectionChange(arr) {
        state.selectedItems = arr
      },
      // 请求函数
      async getList(params) {
        console.log(params)
        // params是从组件接收的，包含分页和搜索字段。
        const { data } = await getApplyList(params)

        // 必须要返回一个对象，包含data数组和total总数
        return {
          data: data.list,
          total: +data.total,
        }
      },
    })
    const table = ref(null)
    const refresh = () => {
      table.value.refresh()
    }
    const methods = {
      formatDate(ns) {
        var d = new Date(ns*1000);
        var month = (d.getMonth()+ 1).toString().length == 1 ? '0'+(d.getMonth()+1) : d.getMonth() + 1;
        var date = d.getDate().toString().length == 1 ? '0'+d.getDate() : d.getDate();
        var hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours();
        var minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : d.getMinutes();
        var seconds = d.getSeconds().toString().length == 1 ? '0'+d.getSeconds() : d.getSeconds();
        var dformat = [ d.getFullYear(), month, date].join('/')
          + ' ' + [ hours, minutes, seconds ].join(':');
        return dformat;
      },
      arrToName(v) {
        let team = ''
        switch (v.team) {
          case '1':
            team = '一团'
            break
          case '2':
            team = '二团'
            break
          case '3':
            team = '三团'
            break
          case '4':
            team = '四团'
            break
          default:
            team = '获取失败'
            break
        }
        return '[ ' + team + ' ] ' + v.nickname
      },
      async detail(data) {
        let resp = await getApplyDetail(data.donate_id)
        state.details = []
        state.current_row = data
        state.details = resp.data.list
        state.detailVisible = true

      },
      async getAdmin() {
        let resp = await getApplyPasser()
        console.log(resp.data)
        let data = resp.data.list
        state.searchConfig.fields[2].options = []
        data.map(item => {
          state.searchConfig.fields[2].options.push({
            name: item.nickname,
            value: item.id,
          })
        })
      },
      async editbox(data) {
        let resp = await getApplyDetail(data.donate_id)
        state.details = []
        state.current_row = data
        state.details = resp.data.list
        state.editVisible = true
        state.edit.id = data.id
      },
      async editSubmit() {
        let resp = await editApply(state.edit)
        if (resp.code !== 200) {
          ElMessage({
            message: resp.message || '服务器错误！',
            type: 'error',
          })
        } else {
          state.editVisible = false
          table.value.refresh()
          ElMessage({
            message: resp.message || 'ok',
            type: 'success',
          })
        }
      },
    }
    onMounted(() => {
      methods.getAdmin()
    })
    return { ...toRefs(state), refresh, table, ...methods }
  },
})
</script>
<style scoped>
.ml-2{
  margin: 0 4px;
}
</style>